<template>
  <a-drawer
    title="查看完成情况"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 650"
    :body-style="{
      height: 'calc(100% - 55px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    @close="onCancel"
    :destroyOnClose="true"
  >
    <div class="complete-header">
      <div>已完成/目标{{targetType == 4 ? '(元)' : '(个)'}}：{{ `${planInfo?.FinishedNumber || 0}/${planInfo?.target_num || 0}` }}</div>
      <div>
        执行日期：{{ `${planInfo?.plan_start || ''} 至 ${planInfo?.plan_end || ''}` }}
      </div>
    </div>
    <a-tabs v-if="targetType == 2" v-model:activeKey="currentTab">
      <a-tab-pane
        key="clue"
        tab="线索"
      >
        <ClueTable :editId="editId"/>
      </a-tab-pane>
      <a-tab-pane
        key="customer"
        tab="客户"
      >
        <CustomerTable :editId="editId"/>
      </a-tab-pane>
    </a-tabs>
    <ClueTable v-if="targetType == 1" :editId="editId"/>
    <CustomerTable v-if="targetType == 3" :editId="editId"/>
    <ContractTable v-if="targetType == 4 || targetType == 5" :editId="editId"/>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, watch, toRefs, computed } from "vue";
import request from "../../../../common/utils/request";
import ClueTable from "@/views/village/AttractPlan/modules/ClueTable.vue";
import ContractTable from "@/views/village/AttractPlan/modules/ContractTable.vue";
import CustomerTable from "@/views/village/AttractPlan/modules/CustomerTable.vue";

export default defineComponent({
  name: "CompletePlan",
  components: {
    ClueTable,
    ContractTable,
    CustomerTable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [Number, String, undefined],
      default: undefined,
    },
    targetType: {
      type: [Number, String, undefined],
      default: undefined,
    },
  },
  setup(props, context) {
    const state = reactive({
      planInfo: {},
      currentTab: 'clue',
    });

    const onCancel = () => {
      context.emit("cancel");
    };

    const getDetail = () => {
      const params = {
        id: props.editId,
      };
      request
        .get("/org", "/business/plan/detail", params)
        .then((res) => {
          state.planInfo = res?.planDetail || {};
        })
    };



    const reset = () => {
      state.planInfo = {};
      state.currentTab = 'clue';
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (props.editId || props.editId == 0) {
            getDetail();
          }
        } else {
          // 重置
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      onCancel,
    };
  },
});
</script>

<style lang="less" scoped>
.complete-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
</style>
